<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>标点测试</title>
  <style>
    body{
    	margin: 0px;
    	padding: 0px;
    	background-image:url(svg/smt.svg);
    	background-size: 100%;
    }
    #b{
      	height: 1000px;
      	width: 100%;
    }
    #geo{
      	width: 0;
        height: 0;
        border-left: 10px solid green;
        border-right: 10px solid red;
        border-top: 10px solid yellow;
        border-bottom: 10px solid blue;
        border-radius: 100px;
        position: absolute;
        left: 0;
        top: 0;
    }
  </style>
 
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
  <script>
    $("document").ready(function(){
    	layer.open({
    		  type: 2,
    		  title: '如何使用？',
    		  shadeClose: true,
    		  shade: 0.5,
    		  time: 10000,
    		  anim: 2,
    		  area: ['380px', '250px'],
    		  content: 'ask.html'
    		}); 
    	
    	// 调试
  		$("#b").bind('mousemove',function(e){    
    		var X = e.pageX-$(this).offset().left;
    		var Y = e.pageY-$(this).offset().top;
     		$("#geo").text("x:"+X+",y:"+Y)
  		})
  		
  		// 传值
  		$("#b").bind('click',function(e){    
  			//var name,x,y;
  			layer.prompt({title: '输入设备名，并确认', formType: 0}, function(name, index){
  			  layer.close(index);
  			  layer.prompt({title: '输入x，并确认', formType: 0}, function(x, index){
  			    layer.close(index);
  			  	layer.prompt({title: '输入y，并确认', formType: 0}, function(y, index){
    			    layer.close(index);
    			    $.ajax({
    					method : 'POST',
    					url : 'setGeo.jsp?name='+name+'&x='+x+"&y="+y,
    					async:false,
    					success : function(data) {
    								 if(name == null && x == null & y == null){
    									 layer.tips('不能为空！', '#geo');
    			  		    		 }else{
    			  		    			layer.msg('添加完毕！设备名：'+ name +'<br>x：'+x+'<br>y：'+y);
    			  		    			layer.open({
    			  		    		      type: 2,
    			  		    		      title: '查看效果',
    			  		    		      shadeClose: true,
    			  		    		      shade: false,
    			  		    		      maxmin: true, //开启最大化最小化按钮
    			  		    		      area: ['893px', '700px'],
    			  		    		      content: 'index.html'
    			  		    		    });
    			  		    		 }
    							},
    					error : function(data){
    								layer.msg('err!');
    					}
    				});
    			  });
  			  });
  			});
  			/* name = prompt("name:")
  		    x = prompt("X:");
  		    y = prompt("Y:"); */
  		  	/* $.ajax({
				method : 'POST',
				url : 'setGeo.jsp?name='+name+'&x='+x+"&y="+y,
				async:false,
				success : function(data) {
							 if(name == null && x == null & y == null){
		  		    			alert("不能为空!");
		  		    		 }else{
							  	alert("success!");}
						},
				error : function(data){
							  alert("error!");
				}
			}); */
  		})
	});
    
 	// div跟随 
    document.onmousemove = function(e) {
        var div = document.getElementById("geo");
        div.style.left = e.clientX+"px";
        div.style.top = e.clientY+"px";
    }
   
  </script>
</head>
<body>
  <div id = "b"></div>
  <div id = "geo"></div>
</body>
</html>